<include file="Public:header" />
<div id="zoneHeader">
    <h2>结算量走势图</h2>
</div><!--/#zoneHeader-->
<div id="zoneBody">
    <div id="zoneBodySearch">
        <form id="flowForm">
            <ul>
                <li><b>日期区间：</b><input type="text" name="day" class="fW100p" /> ～ <input type="text" name="day2" class="fW100p" /></li>
                <li><button type="button" id="btnFlowSearch">查询</button></li>
            </ul>
        </form>
    </div><!--/#zoneBodySearch-->
    <div id="zoneBodyContent">
        <div id="flow"></div> <!--/#flow--> 
    </div><!--/#zoneBodyContent-->
</div><!--/#zoneBody-->

<script type="text/javascript">
function flowShow($o, cate, dao) {
    $o.highcharts({
        chart: {
            type: 'spline'
        },
        
        title: {
            text: '结算量走势图',
            x: -20 //center
        },
        xAxis: {
            categories: cate
        },
        yAxis: {
            title: {
                text: '结算量(次)'
            },
            min : 0,
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '次',
            crosshairs : true,   //显示指针线
            shared: true    //可同时显示多个项目对应的数据
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: dao
    });
}

$(function() {

var url = '?m=PlanStats&a=apiGetNumFlow',
    $form = $('#flowForm'),
    $flow = $('#flow');

$form.find('input[name=day]').datebox();
$form.find('input[name=day2]').datebox();


$('#btnFlowSearch').click(function() {
    var day = $form.find('[name=day]').val(),
        day2 = $form.find('[name=day2]').val();

    if(day.length < 8 || day2.length < 8) {
        alert('请指定两个日期，日期格式必须为"年-月-日"格式');

        return false;
    }

    var tmpUrl = url + '&day=' + day + '&day2=' + day2;

    $flow.html('正在载入数据，请稍等...');

    $.getJSON(tmpUrl, function(j){
        if(!j.s) {
            $flow.html(j.m);

            return false;
        }

        var cate = j.d.cate,
            dao = [];

        $.each(j.d.dao, function(k, v) {
            var tmp = {name : k, data : []};

            $.each(v, function(k2, v2){
                tmp.data.push(v2);
            })

            dao.push(tmp);
        })

        flowShow($flow, cate, dao);
    })
});

});
</script>

<script src="__PUBLIC__/Js/chart/highcharts.js"></script>
<include file="Public:footer" />
